<template>
  <div>
    <!-- 标题栏 -->
    <div class="top">
      <a href="">爱回收 • 专注回收十一年 ></a>
        <!-- 搜索框 -->
  <van-search show-action shape="round" background="#fed600" v-model="value" placeholder="请输入搜索关键词">
  <template #action>
    <van-icon name="cart-o" color="#1989fa" size="32" />
  </template>
</van-search>
</div>
<!-- 导航栏 -->
<div>
<van-grid>
  <van-grid-item icon="el-icon-mobile-phone" text="手机" >
  <template #action>
    
  </template>
</van-grid-item>
  <van-grid-item icon="./src/assets/icon/手机.png" text="笔记本" />
  <van-grid-item icon="photo-o" text="平板电脑" />
  <van-grid-item icon="photo-o" text="摄影摄像" />
  <van-grid-item icon="photo-o" text="智能数码" />
  <van-grid-item icon="photo-o" text="电脑配件" />
  <van-grid-item icon="photo-o" text="腕表" />
  <van-grid-item icon="photo-o" text="箱包" />
</van-grid>
<!-- 提示栏 -->
<van-notice-bar left-icon="volume-o" :scrollable="false">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :touchable="false"
    :show-indicators="false"
  >
    <van-swipe-item><span>热门配件:</span>数据线9.9起</van-swipe-item>
    <van-swipe-item><span>以求换新:</span>最高可抵 ￥630,含补贴 ￥200</van-swipe-item>
    <van-swipe-item><span>人世间有百媚千红，唯独你是我情之所钟</span></van-swipe-item>
  </van-swipe>
</van-notice-bar>
<!-- 提示栏结束 -->
    </div>
  <div class="yaner">
  
  <div class="yanxuan">
    <span>严选二手 放心买</span>
    <a href="">更多></a>
  </div>
  <van-row justify="space-around">
    <van-col span="11">
      <van-card
  price="5969"
  title="Apple 苹果 iPhone 14 Plus 128G 午夜色 国行 全网通"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags><br>
    <van-tag plain type="danger">99新</van-tag>&nbsp;
    <van-tag plain type="danger">严选</van-tag>
  </template>
</van-card>
    </van-col>
    <van-col span="11">
      <van-card
  price="6299"
  title="Apple iPad Air5 256G 星光色 国行 WIFI版本"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags><br>
    <van-tag plain type="danger">99新</van-tag>&nbsp;
    <van-tag plain type="danger">严选</van-tag>
  </template>
</van-card>
    </van-col>
  </van-row>
</div> 
<!--留言区 -->
<div class="liuyan">
  <van-skeleton title avatar :row="3" />
  <template >

  </template>
</div>

  </div>
</template>

<script setup lang="ts">
 import { ref } from 'vue';
const value=ref('');


 
</script>

<style>
.top{
  background-color: #fed600;
  padding: 15px;
}
.top>a{
  color: black;

}
.van-search__field{
  padding-left: 65px;

}
.van-search__action {
  height: 34px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.notice-swipe span{
  font-weight: bold;
}
.yanxuan{
  display: flex;
  justify-content: space-between;
}
.yanxuan>span{
  color: #000000;
  font-weight: bold;
   margin-top: 5px;
   padding: 10px;
}
.yanxuan a{
  margin-top: 10px;
}
.yaner{
  background-color:#ebedee;
}
.van-card{
  border-radius: 10px;
  margin-bottom: 15px;
}
.van-card__header{
  display:block;
}
</style>